<template>
  <div v-loading="loading" element-loading-text="拼命加载中...">
    <!-- 顶部信息 -->
    <el-page-header v-if="showPageHeader" class="box-shadow mb-3" icon="arrow-left" @back="handleGoBack">
      <template #content>
        <span>商品操作</span>
        <DictTag style="margin-left: 1rem" v-model="formData.status" :circle="false" dict-type="shop_goods_status"/>
      </template>
      <template #extra>
        <div class="flex items-center">
          <!-- 审核操作 -->
          <template v-if="audit">
            <el-button icon="circle-check-filled" type="success" @click="handleAuditShow">商品审核</el-button>
          </template>

          <template v-if="!readonly">
            <el-button icon="edit" type="primary" @click="onSubmitForm">保存修改</el-button>
          </template>
          <el-button v-if="readonly" icon="refresh" @click="handleRefresh">刷新信息</el-button>
          <el-button icon="arrow-left" @click="handleGoBack(false)">返回上页</el-button>
        </div>
      </template>
    </el-page-header>

    <!-- 商品信息 -->
    <div class="app-container-main">
      <el-tabs v-model="activeName">
        <!-- 商品信息 -->
        <el-tab-pane label="基础信息" name="baseInfo">
          <el-form ref="formRef"
                   :disabled="readonly"
                   :model="formData"
                   :rules="formRules"
                   class="goods-form"
                   label-width="100px">

            <el-row :gutter="12">
              <el-col :md="12">
                <el-card class="content-card">
                  <div class="el-descriptions__header">
                    <div class="el-descriptions__title">商品信息</div>
                  </div>

                  <template v-if="formData.id > 0 && readonly">
                    <el-form-item label="商品编号：">
                      <el-input v-model="formData.id" readonly/>
                    </el-form-item>
                  </template>

                  <el-form-item label="商品类型：" prop="type">
                    <GoodsType v-model="formData.type" :readonly="readonly" @change="handleChangeGoodsType"/>
                  </el-form-item>

                  <el-form-item label="归属店铺：" prop="shop_id">
                    <el-select v-model="formData.shop_id" :disabled="readonly" clearable placeholder="请选择供归属店铺" style="width: 60%">
                      <el-option v-for="item in shopList" :key="item.id" :label="'[' + item.id + '] ' + item.name" :value="item.id"/>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="商品分类：" prop="cate_id">
                    <TreeSelect ref="cateTreeRef" v-model="cateName" :tree-data="cateTreeData" style="width: 60%" @selectChange="handleSelectCate"/>
                    <el-button-group v-if="!readonly && hasPermission(['shop:goods_category:create', 'shop:goods_category:update'])" size="small" style="margin-left: 6px;margin-top: 6px">
                      <el-button v-if="!readonly && hasPermission('shop:goods_category:create')" type="danger" @click="handleShowCateForm(1,0)">新增</el-button>
                      <el-button v-if="formData.cate_id && formData.cate_id > 0 && hasPermission('shop:goods_category:update')" type="primary" @click="handleShowCateForm(1,formData.cate_id)">编辑</el-button>
                    </el-button-group>
                  </el-form-item>

                  <el-form-item label="商品名称：" prop="name">
                    <el-input v-model="formData.name" :autosize="{ minRows: 2}" :maxlength="128" :readonly="readonly" placeholder="请填写商品名称" type="textarea"/>
                  </el-form-item>

                  <el-form-item label="商品封面：" prop="cover_url">
                    <UploadImage v-model="formData.cover_url" :disabled="readonly" :file-size="fileSize" height="66px" width="66px"/>
                  </el-form-item>

                  <el-form-item v-if="formData.mark_flag > 0 || !readonly" label="商品标签：" prop="mark_flag">
                    <MultipleTag v-if="readonly" :flag-val="formData.mark_flag" :options="markFlagOptions" default-name=""/>
                    <el-checkbox-group v-else v-model="markFlagList">
                      <el-checkbox v-for="item in markFlagOptions" :key="item.value" :value="item.value">
                        {{ item.label }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>

                  <el-form-item label="限购数量：" prop="buy_limit">
                    <el-input-number v-model="formData.buy_limit" :disabled="readonly" :min="0" :precision="0" :step="1" controls-position="right"/>
                    <span class="tip">0 = 无限制</span>
                  </el-form-item>

                  <el-form-item label="商品排序：" prop="order_num">
                    <el-input-number v-model="formData.order_num" :disabled="readonly" :max="99999" :min="0" :precision="0" :step="1" controls-position="right"/>
                    <span class="tip">数值越小排序越靠前</span>
                  </el-form-item>

                  <el-divider border-style="dashed"/>

                  <el-form-item label="私域配置：" prop="private_config_id" v-if="formData.type == 2">
                    <el-select v-model="formData.private_config_id" :disabled="readonly" placeholder="请选择私域配置" style="width: 60%" value="">
                      <el-option v-for="item in priceCostConfigs" :key="item.id" :label="item.name" :value="item.id"/>
                    </el-select>
                    <el-button-group v-if="!readonly && formData.private_config_id && formData.private_config_id > 0 && hasPermission(['config:private_price_cost:info'])"
                                     size="small" style="margin-left: 6px;margin-top: 6px">
                      <el-button type="info" @click="handleShowPriceCostConfigForm(0, formData.private_config_id)">查看</el-button>
                    </el-button-group>
                  </el-form-item>

                  <el-form-item label="补贴配置：" prop="subsidy_config_id">
                    <el-select v-model="formData.subsidy_config_id" :disabled="readonly" placeholder="请选择补贴配置" style="width: 60%" value="" @change="handleChangeSubsidyConfig">
                      <el-option v-for="item in subsidyConfigList" :key="item.id" :label="item.name" :value="item.id">
                        <span style="float: left">{{ item.name }}</span>
                        <span v-if="item.mode" style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.mode == 2 ? '2.0' : item.mode == 1 ? '1.0' : '' }}</span>
                      </el-option>
                    </el-select>
                    <el-button-group v-if="!readonly && formData.subsidy_config_id && formData.subsidy_config_id > 0 && hasPermission(['subsidy:config:info'])" size="small" style="margin-left: 6px;margin-top: 6px">
                      <el-button type="info" @click="handleShowSubsidyConfigForm(0, formData.subsidy_config_id)">查看</el-button>
                    </el-button-group>
                  </el-form-item>

                  <template v-if="!formData.subsidy_config_id">
                    <el-form-item label="补贴比例：" prop="subsidy_ratio">
                      <el-input-number v-model="formData.subsidy_ratio" :max="1" :min="0" :precision="2" :step="0.1" controls-position="right"/>
                      <span v-if="formData.subsidy_ratio != undefined" class="tip">{{ toPercent(formData.subsidy_ratio) }}</span>
                    </el-form-item>

                    <el-form-item label="让利比例：" prop="rebate_ratio">
                      <el-input-number v-model="formData.rebate_ratio" :max="0.9" :min="0" :precision="2" :step="0.01" controls-position="right"/>
                      <span v-if="formData.rebate_ratio != undefined" class="tip">{{ toPercent(formData.rebate_ratio) }}</span>
                    </el-form-item>

                    <el-form-item label="推广奖金：" prop="promotion_ratio">
                      <el-input-number v-model="formData.promotion_ratio" :max="0.2" :min="0" :precision="2" :step="0.01" controls-position="right"/>
                      <span v-if="formData.promotion_ratio != undefined" class="tip">{{ toPercent(formData.promotion_ratio) }}</span>
                    </el-form-item>

                    <el-form-item label="联盟服务费：" prop="service_ratio">
                      <el-input-number v-model="formData.service_fee_ratio" :max="0.2" :min="0" :precision="2" :step="0.01" controls-position="right"/>
                      <span v-if="formData.service_fee_ratio != undefined" class="tip">{{ toPercent(formData.service_fee_ratio) }}</span>
                    </el-form-item>
                  </template>
                </el-card>
              </el-col>

              <el-col :md="12">

                <!-- 商品轮播图 -->
                <el-card class="content-card">
                  <div class="el-descriptions__header">
                    <div class="el-descriptions__title">轮播图</div>
                  </div>

                  <UploadImageMultiple v-model="bannerList" :disabled="readonly"
                                       :file-size="fileSize"
                                       :image-type="0"
                                       :limit="20"
                                       :show-delete="true"
                                       height="66px" width="66px"/>
                </el-card>

                <el-divider v-if="showDivider" border-style="dashed"/>

                <!-- 图文详情 -->
                <el-card class="content-card">
                  <div class="el-descriptions__header">
                    <div class="el-descriptions__title">内容详情</div>
                  </div>
                  <GoodsContent :item-list="contentList" :readonly="readonly"/>
                </el-card>

                <el-divider v-if="showDivider" border-style="dashed"/>

                <!-- 默认价格设置 -->
                <template v-if="showGoodsPrice">
                  <el-card class="content-card">
                    <div class="el-descriptions__header">
                      <div class="el-descriptions__title">默认价格设置</div>
                    </div>

                    <el-form-item label="商品售价：" prop="price">
                      <el-input-number v-model="formData.price" :disabled="readonly" :max="10000000" :min="0" :precision="2" :step="0.1" controls-position="right"/>
                    </el-form-item>

                    <el-form-item label="供货价格：" prop="price_cost">
                      <el-input-number v-model="formData.price_cost" :disabled="readonly" :max="10000000" :min="0" :precision="2" :step="0.1" controls-position="right"/>
                    </el-form-item>

                    <template v-if="formData.price_type === 1">
                      <el-form-item label="积分价格：" prop="price_integral">
                        <el-input-number v-model="formData.price_integral" :disabled="readonly" :max="10000000" :min="0" :precision="2" :step="0.1" controls-position="right"/>
                      </el-form-item>
                    </template>
                  </el-card>

                  <el-divider v-if="showDivider" border-style="dashed"/>
                </template>

                <!-- 不发货地区配置 -->
                <el-card class="content-card">
                  <div class="el-descriptions__header">
                    <div class="el-descriptions__title">不发货地区配置</div>
                  </div>

                  <el-input v-model="notShippedName" :autosize="{ minRows: 2, maxRows: 4}" :readonly="true" placeholder="点击选择不发货地区" type="textarea" @click.native="handleShowAddressCheck">
                  </el-input>
                </el-card>

                <template v-if="formData.audit_time && formData.audit_opinion">
                  <!-- 审核原因 -->
                  <el-divider border-style="dashed"/>
                  <el-card class="content-card">
                    <div class="el-descriptions__header">
                      <div class="el-descriptions__title">审核记录</div>
                    </div>

                    <el-form-item label="审核时间：">
                      <span>{{ formData.audit_time || '-' }}</span>
                    </el-form-item>

                    <el-form-item label="审核原因：">
                      <span>{{ formData.audit_opinion || '-' }}</span>
                    </el-form-item>
                  </el-card>
                </template>
              </el-col>
            </el-row>

          </el-form>
        </el-tab-pane>

        <!-- 商品模型 -->
        <el-tab-pane label="规格库存" name="modelInfo">
          <GoodsModel ref="goodsModelRef"
                      v-model="formData.model_id"
                      :goods-id="formData.id"
                      :goods-status="formData.status"
                      :goods-type="formData.type"
                      :item-list="formData.spec_list"
                      :readonly="readonly"
                      @change="handleChangeModelId"/>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 分类操作弹窗 -->
    <GoodsCateForm ref="cateFormRef" @refresh="handleRefreshCateData"/>
    <!-- 地址选择弹窗 -->
    <AddressCheckDialog ref="addressCheckDialogRef" @selected="handleAddressSelected"/>
    <!-- 审核弹窗 -->
    <AuditDialog ref="auditRef" @submit-audit="handleAuditGoods"/>
    <!-- 补贴配置 -->
    <SubsidyConfigForm ref="subsidyConfigFormRef"/>
    <!-- 私域配置 -->
    <PrivateConfigForm ref="priceCostConfigFormRef"/>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { useTabsNavStore } from '@/store';
import { nextTick, onMounted, reactive, ref } from 'vue';
import GoodsContent from '@/views/shop/goods/components/goods-content.vue';
import { UploadImage, UploadImageMultiple } from '@/components/upload';
import GoodsModel from '@/views/shop/goods/components/goods-model.vue';
import { defGoodsInfo, goodsAudit, goodsCategoryTreeList, GoodsFreight, GoodsImage, goodsInfo, goodsSaveOrUpdate, shopSimpleList } from '@/api/api-shop.ts';
import { ElLoading, ElMessage, ElNotification, FormInstance, FormRules } from 'element-plus';
import GoodsCateForm from '@/views/shop/goods-cate/goods-cate-form.vue';
import { AddressCheckDialog, AuditDialog, MultipleTag } from '@/components/other';
import { UploadItemData } from '@/components/upload/src/use-upload.ts';
import { goodsMarkFlagOptions } from '@/utils/global-dict.ts';
import { TreeSelect } from '@/components/tree-select';
import { hasPermission } from '@/utils/permission.ts';
import { BaseCategory, BaseShopData } from '@/api/common.ts';
import GoodsType from '@/views/shop/goods/components/goods-type.vue';
import { SubsidyConfig, subsidyConfigTypeList } from '@/api/api-subsidy.ts';
import SubsidyConfigForm from '@/views/subsidy/config/config-form.vue'
import { toPercent } from '@/utils';
import { DictTag } from '@/components/dict-tag';
import { PrivatePriceCostConfig, privatePriceCostConfigs } from '@/api/api-config.ts';
import PrivateConfigForm from '@/views/config/private-price-cost/config-form.vue'

defineOptions({name: 'goods-info'});

const props = defineProps({
  id: {
    type: Number,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
  audit: {
    type: Boolean,
    default: false
  },
  showPageHeader: {
    type: Boolean,
    default: true
  }
});

const showDivider = ref(true);
const showGoodsPrice = ref(false);
const ratioType = ref<any>(undefined);
const currentRoute = useRoute();
const tabsNavStore = useTabsNavStore();
const loading = ref(false);
const activeName = ref('baseInfo');
const formRef = ref<FormInstance>();
const formData = ref({...defGoodsInfo});
// 表单验证规则
const formRules = reactive<FormRules>({
  type: [{required: true, message: '请选择商品类型', trigger: 'blur'}],
  name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
  cover_url: [{required: true, message: '请上传商品封面图', trigger: 'blur'}],

  shop_id: [{required: true, message: '店铺不能为空', trigger: 'blur'}],
  cate_id: [{required: true, message: '分类不能为空', trigger: 'blur'}],
  order_num: [{required: true, message: '排序字段不能为空', trigger: 'blur'}],

  price_type: [{required: true, message: '请选择商品价格类型', trigger: 'blur'}],
});

const fileSize = ref(10);
const bannerList = ref<UploadItemData[]>([]);  // 轮播图列表
const contentList = ref<UploadItemData[]>([]); // 商品内容图片

/** 初始化 **/
onMounted(async () => {
  await handleRefresh();
})

/** 返回上一页 */
const router = useRouter();
const handleGoBack = async (refresh = false) => {
  await tabsNavStore.delView(currentRoute);
  let params = {refresh: refresh ? 1 : 0}
  await router.push({name: 'goods-list', state: {params}});
};

/** 刷新数据 */
const handleRefresh = async () => {
  await handleResetData();
  await initCateData();
  await initShopData();
  await initSubsidyConfigs();
  await initPriceCostConfigs();
  await initData(props.id);
};

/** 重置数据 */
const handleResetData = async () => {
  shopList.value = [];
  cateName.value = '';
  cateTreeData.value = [];
  bannerList.value = [];
  contentList.value = [];
  ratioType.value = undefined;
  // 重置表单数据
  formData.value = {...defGoodsInfo};
  // 重置界面表单数据
  formRef.value?.resetFields();
};

/** 加载信息 */
const initData = async (id: number) => {
  if (!id || id <= 0) return;
  loading.value = true;
  try {
    const {data} = await goodsInfo(id)
    formData.value = data;

    // 私域配置
    formData.value.private_config_id = formData.value.private_config_id || undefined;
    // 分类名称回显
    handleCateSetCurrentNode();
    // 数据转换回显
    bannerList.value = handleImageToUploadList(formData.value.banner_list);
    contentList.value = handleImageToUploadList(formData.value.content_list);
    notShippedList.value = formData.value.not_shipped_list || [];
    // 不发货地区显示
    handleAddressSelected(notShippedList.value, true);
    // 商品标签数据回显
    handleMarkFlagConvert();
  } finally {
    loading.value = false;
  }
};

/** 初始化商家列表 */
const shopList = ref<BaseShopData[]>([]);
const initShopData = async () => {
  shopList.value = [];
  const {data} = await shopSimpleList({type: 10});
  shopList.value = data;
};

/** 初始化分类数据 */
const cateName = ref('');
const cateTreeData = ref<BaseCategory[]>([]);
const cateTreeRef = ref();
const initCateData = async () => {
  cateTreeData.value = [];
  const {data} = await goodsCategoryTreeList();
  cateTreeData.value = data;
};

/** 处理分类选中 */
const handleSelectCate = (item?: any) => {
  formData.value.cate_id = item
};

/** 分类名称回显 */
const handleCateSetCurrentNode = () => {
  nextTick(() => {
    cateTreeRef.value?.handleSetCurrentNode(formData.value.cate_id)
  });
};

/** 分类操作弹窗 */
const cateFormRef = ref<any>();
const handleShowCateForm = (mode: number, id?: number, parentId?: number) => {
  cateFormRef.value?.open(mode, id, parentId);
};

/** 刷新分类数据 */
const handleRefreshCateData = async () => {
  // 加载主分类信息
  await initCateData();
};

/** 子组件触发 模型ID改变 */
const handleChangeModelId = (val: any) => {
  formData.value.model_id = val;
};

/** 不发货地区数据 */
const notShippedList = ref<GoodsFreight[]>([]);
const notShippedName = ref('');
const notShippedCodeList = ref<number[]>([]);

/** 地址选择弹窗 */
const addressCheckDialogRef = ref<any>();
const handleShowAddressCheck = () => {
  addressCheckDialogRef.value?.open(notShippedCodeList.value);
};

/** 处理地址选择完成 */
const handleAddressSelected = (itemList?: any[], format = false) => {
  let list: GoodsFreight[] = [];
  let codeList: number[] = [];
  let nameList: string[] = [];

  if (itemList && itemList.length > 0) {
    for (let item of itemList) {
      nameList.push(item.name);
      codeList.push(item.code);
      list.push({code: item.code, name: item.name});
    }
  }

  // 非格式化 需要设置当前值
  if (!format) {
    notShippedList.value = list;
  }

  // 其他值处理
  notShippedName.value = nameList.join(' | ');
  notShippedCodeList.value = codeList;
};

/** 处理图片转换为上传格式 */
const handleImageToUploadList = (itemList?: GoodsImage[]) => {
  let result: UploadItemData[] = [];
  if (itemList && itemList.length > 0) {
    itemList.map((item, index) => {
      result.push({id: item.id, content: item.content, type: item.type, orderNum: index + 1})
    })
  }
  return result;
};

/** 处理上传格式转换为图片 */
const handleUploadToImageList = (itemList?: UploadItemData[]) => {
  let result: GoodsImage[] = [];
  if (itemList && itemList.length > 0) {
    itemList.map((item, index) => {
      result.push({id: item.id, content: item.content, type: item.type, order_num: index + 1})
    })
  }
  return result;
};

/** 商品标签信息 */
const markFlagList = ref<number[]>([]);
const markFlagOptions = reactive(goodsMarkFlagOptions);
const handleMarkFlagUpdate = () => {
  let markFlag = 0
  markFlagList.value.forEach(it => markFlag |= it);
  formData.value.mark_flag = markFlag > 0 ? markFlag : 0;
  return formData.value.mark_flag;
};

const handleMarkFlagConvert = () => {
  let flagList: number[] = [];
  let markFlag = formData.value.mark_flag;
  for (let item of markFlagOptions) {
    let flag = item.value as number;
    if ((markFlag & flag) == flag) {
      flagList.push(flag);
    }
  }
  markFlagList.value = flagList;
};

/** 表单数据提交 */
const goodsModelRef = ref<any>();
const onSubmitForm = async () => {
  await formRef.value?.validate((valid, fields) => {
        if (!valid) {
          ElMessage.error('请检查是否有必填项未完善');
          return
        }

        // 其他参数校检
        if (bannerList.value.length < 1) {
          ElMessage.error('轮播图不能为空');
          return
        } else if (contentList.value.length < 1) {
          ElMessage.error('商品详情不能为空');
          return
        } else if (!formData.value.model_id || formData.value.model_id <= 0) {
          ElMessage.error('请设置商品规格信息');
          return
        }

        // 获取商品规格数据
        let goodsSpecs = goodsModelRef.value?.getGoodsSpecs();
        if (goodsSpecs.length < 1) {
          ElMessage.error('商品规格不能为空');
          return
        }
        let storeCount = 0;
        for (let item of goodsSpecs) {
          if (item.store_count < 0) {
            ElMessage.error('库存数量不能小于0');
            return
          }

          if (item.price_cost < 0) {
            ElMessage.error('请正确填写商品供货价')
            return
          }

          // 混合支付
          if (formData.value.price_type == 1) {
            // 必须有1个值 > 0
            if (item.price <= 0 && item.price_integral <= 0) {
              ElMessage.error('规格商品售价和花朵抵扣不能同时为 0.00')
              return
            }
          } else {
            // 校检商品售价
            if (item.price <= 0) {
              ElMessage.error('请正确填写商品售价')
              return
            }
          }
          // 库存
          storeCount += item.store_count
        }

        // 封装参数
        let params = Object.assign({}, formData.value);
        params.store_count = storeCount;
        params.spec_list = goodsSpecs; // 商品规格
        params.banner_list = handleUploadToImageList(bannerList.value); // 商品轮播图
        params.content_list = handleUploadToImageList(contentList.value); // 商品内容图片
        params.not_shipped_list = notShippedList.value; // 不发货地址
        params.mark_flag = handleMarkFlagUpdate(); // 更新商品标签信息

        const loading = ElLoading.service({
          lock: true,
          text: '正在提交中...',
          background: 'rgba(0, 0, 0, 0.2)'
        })
        let isCreate = !params.id || params.id <= 0;
        goodsSaveOrUpdate(params, isCreate).then(response => {
          // 提示信息
          ElNotification({title: '成功', message: '操作完成', type: 'success', duration: 2000})
          // 返回上页
          handleGoBack(true);
        }).finally(() => {
          loading.close();
        });
      }
  )
};

/** 审核弹窗 */
const auditRef = ref<any>();
const handleAuditShow = () => {
  auditRef.value?.open(formData.value.id);
};
/** 商品审核提交 */
const handleAuditGoods = (data: any) => {
  const loading = ElLoading.service({
    lock: true,
    text: '正在提交中...',
    background: 'rgba(0, 0, 0, 0.2)'
  })
  // 提交数据
  goodsAudit(data).then(response => {
    // 提示信息
    ElNotification({title: '成功', message: '操作完成', type: 'success', duration: 2000})
    // 返回上页
    handleGoBack(true);
  }).finally(() => loading.close())
};

/** 商品类型改变 */
const handleChangeGoodsType = () => {
  formData.value.price_type = formData.value.type == 4 ? 1 : 0;
};

/** 加载补贴配置 */
const subsidyConfigList = ref<SubsidyConfig[]>([]);
const initSubsidyConfigs = async () => {
  subsidyConfigList.value = [];
  try {
    const {data} = await subsidyConfigTypeList(10);
    subsidyConfigList.value = data || []
  } finally {

  }
};

/** 补贴配置操作弹窗 */
const subsidyConfigFormRef = ref<any>();
const handleShowSubsidyConfigForm = (mode: number, id?: number) => {
  subsidyConfigFormRef.value?.open(mode, id);
};

/** 补贴配置选择改变 */
const handleChangeSubsidyConfig = (val: any) => {
  let item = subsidyConfigList.value.find(item => item.id == val);
  if (item) {
    formData.value.rebate_ratio = item.rebate_ratio;
    formData.value.subsidy_ratio = item.subsidy_ratio;
    formData.value.promotion_ratio = item.promotion_ratio;
    formData.value.service_fee_ratio = item.service_fee_ratio;
  } else {
    formData.value.rebate_ratio = 0.0;
    formData.value.subsidy_ratio = 0.0;
    formData.value.promotion_ratio = 0.0;
    formData.value.service_fee_ratio = 0.0;
  }
};

/** 初始化私域配置 */
const priceCostConfigs = ref<PrivatePriceCostConfig[]>([]);
const initPriceCostConfigs = async () => {
  priceCostConfigs.value = [];
  const {data} = await privatePriceCostConfigs();
  priceCostConfigs.value = data;
};

/** 私域配置操作弹窗 */
const priceCostConfigFormRef = ref<any>();
const handleShowPriceCostConfigForm = (mode: number, id?: number) => {
  priceCostConfigFormRef.value?.open(mode, id);
};

</script>

<style lang="scss" scoped>
.goods-form {
  .el-form-item {
    margin-bottom: 16px !important;
  }

  :deep(.el-form-item__content) {
    max-width: 36rem;
  }

  .el-input-number {
    max-width: 10rem;
  }

  .el-descriptions__title {
    border-left: 3px solid var(--el-color-primary);
    padding-left: 10px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
  }
}
</style>
